<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TNK Voyages</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="css/960_16_col.css"/>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>

<script src="scripts/jquery-1.5.1.min.js"></script>
<script src="scripts/jquery.easing.1.3.js"></script>
<script src="scripts/slides.min.jquery.js"></script>

<script type='text/javascript'>

	$(document).ready(function(){
 
		$("img.a").hover(
		function() {
			$(this).stop().animate({"opacity": "0"}, "slow");
		},
		function() {
			$(this).stop().animate({"opacity": "1"}, "slow");
		});
 
	});
</script>

<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true
			});
		});
</script>

</head>

<body>
	<header>
    	<div class="wrapper">
        	<div class="container_16">
            	<div class="grid_16">                	
                    <a href="#">
                        <img class="logo" alt="TNK Viet Nam Travel" src="images/logo_02.png">
                    </a>
                    <div class="hotline">
        				<img alt="address" src="images/intro_header_05.png">
        			</div><!-- end hotline -->                     
                    <nav>
                    	<div class="fadehover">
                    	<ul>
                               <li> <a href="#"><img src="images/btn_accueil.png" class="a"> </a> </li>

                               <li> <a href="#"><img src="images/btn_qui.png" class="a"> </a> </li>

                                <li> <a href="#"><img src="images/btn_theme.png" class="a"> </a></li>

                                <li><a href="#"><img src="images/btn_destination.png" class="a"> </a></li>

                                <li><a href="#"><img src="images/btn_croisieres.png" class="a"></a></li>
 
                                <li><a href="#"><img src="images/btn_hotel.png" class="a"> </a> </li>

                                <li> <a href="#"><img src="images/btn_contact.png" class="a"> </a> </li>
							</ul>  
                        </div>  <!-- face holder -->        			
                    </nav>  
                    <div class="container">												
                        <div id="slides">
                            <div class="slides_container">              	
                                <a href="#"><img src="images/banner_1.jpg" width="940px" height="404px" /> </a>
                                <a href="#"><img src="images/banner_2.jpg" width="940px" height="404px" /> </a>                                
                                    
                            </div><!-- slides_container -->
                             <a href="#" class="prev"><img src="images/left.png" width="18" height="16" alt="Left"></a>            
                             <a href="#" class="next"><img src="images/right.png" width="18" height="16" alt="Right"></a>
            
                        </div><!-- End slides -->               
                </div><!-- end grid_16 -->
                
                <div class="grid_16 offer">
                	<article class="grid_4">
                    	<figure class="featured-thumbnail">
							<a href="http://vietnamhalongcruises.com/cruise/bai-tho-cruise-halong-bay">
								<img src="images/offer_1.jpg"></a>                                   
						</figure>
                        <h2>
                        	<a href="#">honey moon</a>
                        </h2>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, elit</p>
                    </article>
                    <article class="grid_4">
                    	<figure class="featured-thumbnail">
							<a href="http://vietnamhalongcruises.com/cruise/bai-tho-cruise-halong-bay">
								<img src="images/offer_2.jpg"></a>                                   
						</figure>
                        <h2>
                        	<a href="#">Lorum ispum</a>
                        </h2>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, elit</p>
                    </article>
                    <article class="grid_4">
                    <figure class="featured-thumbnail">
                        <a href="http://vietnamhalongcruises.com/cruise/bai-tho-cruise-halong-bay">
                            <img src="images/offer_3.jpg"></a>                                   
                    </figure>
                    <h2>
                        <a href="#">dolor sit amet</a>
                    </h2>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, elit</p>
                    </article>
                    <article class="grid_4">
                    <figure class="featured-thumbnail">
                        <a href="http://vietnamhalongcruises.com/cruise/bai-tho-cruise-halong-bay">
                            <img src="images/offer_4.jpg"></a>                                   
                    </figure>
                    <h2>
                       <a href="#"> consectetuer</a>
                    </h2>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, elit</p>
                    </article>
                    
                </div><!-- end offer -->
                
            </div><!-- end container_16 -->
        </div><!-- end wrapper -->
    </header>
    
    <div id="container">
    	<div class="wrapper">
        	<div class="container_16">
            	<aside class="grid_4">
                	<div class="sitebar">
                        <div class="bg_vintagetable">
                        	<h3>Assistance en ligne</h3>
                            <p>
                                <span style="font-weight:bold">Ms.Phuong</span><br />
                                <a href="#"><img src="images/yahoo.jpg" alt="yahoo support"/></a><br />
                                <a href="#"><img src="images/skype.png" alt="skype support" /></a><br />
                                <span style="font-size:12px;">8:30 - 17:00 (GMT +7)</span>
                            </p>
                        </div><!-- bg_hotline -->
                        
                        <div class="bg_vintagetable">
                        	<h3>demande de devis</h3>
                            <p>
                               Vous avez des idées en vrac?
                                Notre spécialistre est à votre
                                disposition pour concrétiser votre projet
                            </p>
                            <input type="button" class="btn_clickhere" value="" />
                        </div><!-- bg_demande -->
                        
                        <div class="bestseller">
                        	<img src="images/title_bestseller.png" alt="title bestseller" style="padding-top:3px;" />
                            <p>
                            	<ul class="list">
                                	<li>
                                    	<a href="#">Sheraton Miami Beach</a>
                                    </li>
                                    <li>
                                    	<a href="#">Bayside Marketplace</a>
                                    </li>
                                    <li>
                                    	<a href="#">Lonely Planet Miami</a>
                                    </li> 
                                    <li>
                                    	<a href="#">Sheraton Miami Beach</a>
                                    </li>
                                    <li>
                                    	<a href="#">Bayside Marketplace</a>
                                    </li>
                                    <li>
                                    	<a href="#">Lonely Planet Miami</a>
                                    </li>
                                    <li>
                                    	<a href="#">Sheraton Miami Beach</a>
                                    </li>
                                    <li>
                                    	<a href="#">Bayside Marketplace</a>
                                    </li>
                                    <li>
                                    	<a href="#">Lonely Planet Miami</a>
                                    </li>                                   
                                </ul>
                            </p>
                        </div><!-- end bestseller -->
                        
                    </div><!-- end sitebar -->
                </aside>
                
                <!-- content -->
                
                <div class="grid_12 mrgtop">
                đá
                </div>
                
            </div><!-- end container_16 -->
        </div>  <!-- end wrapper -->  
    </div>
</body>
</html>
